<style>
    /* 自定义CSS */
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background-color: #4CAF50; /* 青色背景 */
        color: white;
    }

    .tab-content {
        margin-top: 20px;
    }

    .table {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
    }

    .table thead tr {
        background-color: #e7e7e7;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #f1f1f1;
    }

    .btn-change {
        cursor: pointer;
    }
</style>

<div class="container2">
    <div class="row">
        <div class="col-md-12">
            {:build_heading()}
            
            <ul class="nav nav-tabs" id="userTabs">
                <li class="active"><a href="#all" data-toggle="tab">全部</a></li>
                <li><a href="#students" data-toggle="tab">学生</a></li>
                <li><a href="#teachers" data-toggle="tab">教师</a></li>
                <li><a href="#admins" data-toggle="tab">管理员</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active in" id="all">
                    <div class="">
                        <div class="toolbar2">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                    class="fa fa-refresh"></i> </a>
                            <a href="javascript:;"
                               class="btn btn-success btn-add {:$auth->check('user/user/add')?'':'hide'}"
                               title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                            <a href="javascript:;"
                               class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('user/user/edit')?'':'hide'}"
                               title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                            <a href="javascript:;"
                               class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('user/user/del')?'':'hide'}"
                               title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                            <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                   data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                <ul class="dropdown-menu text-left" role="menu">
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                    </li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                                </ul>
                            </div>
                        </div>
                        <table id="tableAll" class="table table-bordered"></table>
                    </div>
                </div>
                
                <div class="tab-pane " id="students">
                    <div class="">
                        <div class="toolbar2">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                    class="fa fa-refresh"></i> </a>
                            <a href="javascript:;"
                               class="btn btn-success btn-add {:$auth->check('user/user/add')?'':'hide'}"
                               title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                            <a href="javascript:;"
                               class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('user/user/edit')?'':'hide'}"
                               title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                            <a href="javascript:;"
                               class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('user/user/del')?'':'hide'}"
                               title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                            <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                   data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                <ul class="dropdown-menu text-left" role="menu">
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                    </li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                                </ul>
                            </div>
                        </div>
                        <table id="tableStudents" class="table table-bordered"></table>
                    </div>
                </div>
                
                <div class="tab-pane " id="teachers">
                    <div class="">
                        <div class="toolbar2">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                    class="fa fa-refresh"></i> </a>
                            <a href="javascript:;"
                               class="btn btn-success btn-add {:$auth->check('user/user/add')?'':'hide'}"
                               title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                            <a href="javascript:;"
                               class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('user/user/edit')?'':'hide'}"
                               title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                            <a href="javascript:;"
                               class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('user/user/del')?'':'hide'}"
                               title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                            <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                   data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                <ul class="dropdown-menu text-left" role="menu">
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                    </li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                                </ul>
                            </div>
                        </div>
                        <table id="tableTeachers" class="table table-bordered"></table>
                    </div>
                </div>
                
                <div class="tab-pane " id="admins">
                    <div class="">
                        <div class="toolbar2">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                    class="fa fa-refresh"></i> </a>
                            <a href="javascript:;"
                               class="btn btn-success btn-add {:$auth->check('user/user/add')?'':'hide'}"
                               title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                            <a href="javascript:;"
                               class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('user/user/edit')?'':'hide'}"
                               title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                            <a href="javascript:;"
                               class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('user/user/del')?'':'hide'}"
                               title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                            <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                                <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                   data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                <ul class="dropdown-menu text-left" role="menu">
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                    </li>
                                    <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                           data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                                </ul>
                            </div>
                        </div>
                        <table id="tableAdmins" class="table table-bordered"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
